<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ELAT - Lufthansa Tecknik</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/themes/humanity/jquery-ui-1.8.1.custom.css" media="screen" type="text/css"
        rel="stylesheet" />
    <link href="css/ui.jqgrid.css" media="screen" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <!--[if ie 6]>
    	<link href="css/bugs/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    <script type="text/javascript" language="javascript">
	//<![CDATA[
    function customeEditRow(id){ 				
				jQuery("#gridPVT").setSelection('"'+id+'"');
				setTimeout(function(){
				var gr = jQuery("#gridPVT").jqGrid('getGridParam','selrow'); 
				if( gr != null ) 
					jQuery("#gridPVT").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
				else 
					alert("Please Select Row");
				
				 var winH = $(window).height();  
         var winW = $(window).width();  
                 
         //Set the popup window to center  
		 
        $('#editmodgridPVT').css('top',  winH/2-$('#editmodgridPVT').height()/2).css('height','172px');
         $('#editmodgridPVT').css('left', winW/2-$('#editmodgridPVT').width()/2);  
				
				//if(!$('#divDummyEditPVT').length) //inserting only once
				//		$('#editcntgridPVT').eq(0).html('<div id="divDummyEditPVT" class="divDummyEditPVT">'+$('#editcntgridPVT').eq(0).html()+'</div>');
				
				},100);
		 
		
	}
	
	var jqgrid;
	
	function pickdates(id){
				jQuery("#"+id+"_sdate","#gridPVT").datepicker({dateFormat:"yy-mm-dd"}); 
			} 
    var lastsel3;
    var mydata3= [
				{id:"12345",IncidentType:"Seat Reset",TimePeriod:"D - Day(s)",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"23456",IncidentType:"No Data Form",TimePeriod:"D - Day(s)",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"34568",IncidentType:"Replace LRU",TimePeriod:"D - Day(s)",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"12349",IncidentType:"Seat Reset",TimePeriod:"D - Day(s)",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"23450",IncidentType:"No Data Form",TimePeriod:"D - Day(s)",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"34561",IncidentType:"Replace LRU",TimePeriod:"D - Day(s)",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"45678",IncidentType:"Seat Reset - Greaen",TimePeriod:"M - Month(s)",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}				
			];
		$('document').ready(function(){
			jqgrid= jQuery("#gridPVT").jqGrid({
				datatype: "local",
				height: 113,
				colNames:['Date','Incident Type','Time Period','Edit','Search'],
				colModel:[
					{name:'sdate',index:'sdate', width:51, 
							editable:true, 
							editoptions:{size:12, 
								dataInit:function(el){ 
									$(el).datepicker({dateFormat:'yy-mm-dd'}); 
								}, 
								defaultValue: function(){ 
									var currentTime = new Date(); 
									var month = parseInt(currentTime.getMonth() + 1); 
									month = month <= 9 ? "0"+month : month; 
									var day = currentTime.getDate(); 
									day = day <= 9 ? "0"+day : day; 
									var year = currentTime.getFullYear(); 
									return year+"-"+month + "-"+day; 
								} 
						}, 
						formoptions:{ rowpos:2, elmprefix:"(*)",elmsuffix:" yyyy-mm-dd" }, 
						editrules:{required:true} 
					},
					{name:'IncidentType',index:'IncidentType',formoptions:{ rowpos:1, label: "Name", elmprefix:"(*)"},width:185, editable:true, sorttype:"date"},
					{name:'TimePeriod',index:'TimePeriod', width:152,editable: true,edittype:"select",editoptions:{value:"D:D - Day(s);M:M - Month(s);Y:Y - Year(s)"}},
					{name:'act',index:'act', width:60, editable: false, align:'center'},
					{name:'search',index:'search', width:90, editable: false, align:'center'}
				],
				onSelectRow: function(id){			
					
					}
				,
				editurl: "server.php",
				altRows:true,
				autowidth: true,
				cellsubmit:'clientArray',
				cellEdit: true, 
				pager: '#pagerPVT',
				gridComplete: function(){ 
					var ids = jQuery("#gridPVT").jqGrid('getDataIDs'); 
					for(var i=0;i < ids.length;i++){ 
						var cl = ids[i]; 
						be = "<img src=\"css/images/edit.png\" onclick=\"customeEditRow('"+cl+"');return false;\" />";  
						bs = "<img src=\"css/images/search.png\" onclick=\"//customeEditRow();\" />";  

						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{act:be});
						jQuery("#gridPVT").jqGrid('setRowData',ids[i],{search:bs}); 
					} 
					
					if(!$('#recFound').length) //inserting only once
						$('#pagerPVT td').eq(0).after( '<td id="recFound">'+mydata3.length+' records found</td>');
					//$('#gridPVT tr:nth-child(even)').addClass("ui-jqgrid-secondaryrowcolor");

				}, 
				caption: "Displaying Incidents"
			});
			
			
			for(var i=0;i < mydata3.length;i++)
				jQuery("#gridPVT").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
			
			//jQuery("#gridPVT").jqGrid('navGrid',"#pagerPVT",{edit:true,add:true,del:true});
			jQuery("#gridPVT").jqGrid('navGrid','#pagerPVT',
				{view:true}, //options 
				{height:290,reloadAfterSubmit:false, jqModal:true, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"}, // edit options 
				{height:290,reloadAfterSubmit:false,jqModal:true, closeOnEscape:true,bottominfo:"Fields marked with (*) are required", closeAfterAdd: true}, // add options 
				{reloadAfterSubmit:false,jqModal:true, closeOnEscape:true}, // del options 
				{closeOnEscape:true,multipleSearch:true}, // search options 
				{height:250,jqModal:true,closeOnEscape:true} // view options 
			); 
			
			
			
			});
		//]]>
    </script>

</head>
<body>
    <!--MAIN WRAPPER-->
    <div class="wrapper">
        <ul class="topBar">
            <li><a href="#" class="arrPrev">Previous</a></li>
            <li><a href="#" class="arrNext">Next</a></li>
            <li><a href="#" class="question">Help</a></li>
            <li class="right">
                <img src="css/images/logoLufthansa.jpg" alt="Lufthansa Technik" /></li>
        </ul>
        <div class="header">
            <h1 class="heading">
                A380 Cabin SLA Tool - Lufthansa Technik</h1>
        </div>
        <div class="mainMenu">
            <div class="menu">
                <ul>
                    <li class="leftBg"><a href="#">Performance<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Performance 1</a></li>
                            <li><a href="#">Performance 2</a></li>
                            <li><a href="#">Performance 3</a></li>
                            <li><a href="#">Performance 4</a></li>
                            <li><a class="drop" href="#">Performance 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Performance 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Performance 7<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Performance Sub 1</a></li>
                                    <li><a href="#">Performance Sub 2</a></li>
                                    <li><a href="#">Performance Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Performance 8</a></li>
                            <li><a href="#">Performance 9</a></li>
                            <li><a href="#">Performance 10</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Segment<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Segment 1</a></li>
                            <li><a href="#">Segment 2</a></li>
                            <li><a href="#">Segment 3</a></li>
                            <li><a href="#">Segment 4</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Rules<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Rules 1</a></li>
                            <li><a href="#">Rules 2</a></li>
                            <li><a href="#">Rules 3</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Limits</a><div class="separator">
                    </div>
                    </li>
                    <li><a href="#">Alerts<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Alerts 1</a></li>
                            <li><a href="#">Alerts 2</a></li>
                            <li><a href="#">Alerts 3</a></li>
                            <li><a href="#">Alerts 4</a></li>
                            <li><a class="drop" href="#">Alerts 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Alerts Sub 1</a></li>
                                    <li><a href="#">Alerts Sub 2</a></li>
                                    <li><a href="#">Alerts Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a class="drop" href="#">Alerts 6<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Alerts Sub 1</a></li>
                                    <li><a href="#">Alerts Sub 2</a></li>
                                    <li><a href="#">Alerts Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Data<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Data 1</a></li>
                            <li><a href="#">Data 2</a></li>
                            <li><a href="#">Data 3</a></li>
                            <li><a href="#">Data 4</a></li>
                            <li><a class="drop" href="#">Data 5<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Data Sub 1</a></li>
                                    <li><a href="#">Data Sub 2</a></li>
                                    <li><a href="#">Data Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Configuration<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Configuration 1</a></li>
                            <li><a href="#">Configuration 2</a></li>
                            <li><a class="drop" href="#">Configuration 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Configuration Sub 1</a></li>
                                    <li><a href="#">Configuration Sub 2</a></li>
                                    <li><a href="#">Configuration Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Configuration 4</a></li>
                            <li><a href="#">Configuration 5</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                    <li><a href="#">Users<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="#">Users 1</a></li>
                            <li><a href="#">Users 2</a></li>
                            <li><a class="drop" href="#">Users 3<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li><a href="#">Users Sub 1</a></li>
                                    <li><a href="#">Users Sub 2</a></li>
                                    <li><a href="#">Users Sub 3</a></li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#">Users 4</a></li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                        <div class="separator">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="title">
                &gt; Segment
            </div>
            <div class="contentIn">
                <div class="contentTitleOrange">
                    Show Incidents per Segment
                </div>
                <div class="boxGrey">
                    <div class="boxGreyTop">
                    </div>
                    <div class="boxGreyDesc">
                        <ul class="topPart">
                            <li>Incident Type<br />
                                <select>
                                    <option>Resets</option>
                                </select></li>
                            <li>From<br />
                                <input type="text" />
                                <img src="css/images/iconCalen.jpg" alt="Calendar" /></li>
                            <li>To<br />
                                <input type="text" />
                                <img src="css/images/iconCalen.jpg" alt="Calendar" /></li>
                        </ul>
                        <ul class="botPart">
                            Matching Segment(s)
                            <li>
                                <select>
                                    <option>Segment</option>
                                </select></li>
                            <li>
                                <select>
                                    <option>Matches</option>
                                </select></li>
                            <li>
                                <select>
                                    <option>Tail-ign</option>
                                </select></li>
                            <li>
                                <select>
                                    <option>Not Matching</option>
                                </select></li>
                            <li><a href="#" class="btnGrey right">Search</a></li>
                            <li><a href="#" class="btnGrey">Clear</a></li>
                        </ul>
                    </div>
                    <div class="boxGreyBot">
                    </div>
                </div>
                <table id="gridPVT">
                </table>
                <div id="pagerPVT">
                </div>
                <select>
                    <option>Export As</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>
